<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<p>{{ count }}</p>
			<p>
				<button @click="increment">+</button>
				<button @click="decrement">-</button>
			</p>
		</div>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/vuex.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// make sure to call Vue.use(Vuex) if using a module system
			//数据
			const store = new Vuex.Store({
				state: {
					count: 0
				}, 
				mutations: {
//					increment: state => state.count++,
//					decrement: state => state.count--
					increment: function (start) {start.count++},
					decrement: function (start) {start.count--}
				}
			})
			//控制器
			const app = new Vue({
				el: '#app',
				computed: {
					count: function() {
						return store.state.count
					}
				},
				methods: {
					increment: function() {
						store.commit('increment')
					},
					decrement: function() {
						store.commit('decrement')
					}
				}
			})
		</script>
	</body>
</html>